import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {View, Input, ScrollView, Text, Image, Picker} from '@tarojs/components'
import {AtImagePicker, AtIcon} from 'taro-ui'
import {h5Wx} from "../../utils/h5.service";
import {
  BASE_URL,
  materialMedia,
  TARO_ENV,
  UPLODE_FALE,
  SUPPLIER_SAVEANDUPDATE,
  SUPPLIER_DETAIL, SUPPLIER_IDENTITY
} from "../../constants/api";
import {http} from "../../utils/http";
import {newHttp} from "../../utils/request";
import GzhAuth from "../../components/gzh-auth/gzh-auth";
import {vcmonitor} from '../../utils/tools';
import RadioGrounp from "./components/radio-gounp";
import {lxH5Wx} from "../../utils/lx.h5.service";
import './business.scss'

type StateProps = {
  identity: any
  fileList: any
  formData: any
  longitude_and_latitude: any
  store_longitude_and_latitude: any
  doBusiness: any
  doBusinessValue: number | string | null
  windowList: any
  windowsValue: any
  fileLists: any
  fileList1: any
  fileList2: any
  moneyData: any
  toView: any
  settlementPeriodData: any
  isData: any
  isEdit: boolean
  taxesList: any
}

class businessForm extends Component {
  state: StateProps = {
    identity: '',
    settlementPeriodData: [
      {label: '一单一结', value: 0},
      {label: '日结', value: 1},
      {label: '周结', value: 2},
      {label: '月结', value: 3},
      {label: '季结', value: 4},
      {label: '半年结', value: 5},
      {label: '年结', value: 6}
    ],
    toView: null,
    fileList: [],
    fileLists: [],
    fileList1: [[]],
    fileList2: [],
    isEdit: false,
    moneyData: [
      {
        label: '差额(佣金)',
        value: 0
      },
      {
        label: '金额',
        value: 1
      }
    ],
    isData: [
      {
        label: '是',
        value: 1
      },
      {
        label: '否',
        value: 0
      }
    ],
    longitude_and_latitude: {},
    store_longitude_and_latitude: {},
    doBusinessValue: null,
    windowsValue: null,
    doBusiness: [
      {
        value: 1,
        label: '自营(独家，可分销)'
      },
      {
        value: 2,
        label: '自营(独家，不可分销)'
      },
      {
        value: 3,
        label: '自营(非独家，可分销)'
      },
      {
        value: 4,
        label: '自营(非独家，不可分销)'
      },
      {
        value: 5,
        label: '分销其他平台'
      }
    ],
    windowList: [
      {
        value: 0,
        label: '无'
      },
      {
        value: 1,
        label: '自我游'
      },
      {
        value: 2,
        label: '票付通'
      },
      {
        value: 3,
        label: '有赞'
      },
      {
        value: 4,
        label: '其他'
      }
    ],
    formData: {
      taxpayer_type: '',
      settlement_period: 0,
      is_many_group: 1,
      is_education: 1,
      Stores_information: [
        {
          photo: [],
          photos: []
        }
      ],
      longitude_and_latitude: '',
      username: ''
    },
    taxesList: [
      {
        value: '0',
        label: '一般纳税人'
      },
      {
        value: '1',
        label: '小规模'
      },
      {
        value: '2',
        label: '个体户'
      },
    ],

  }

  getTaxesName(id) {
    const goodsSite = this.state.taxesList.filter(item => item.value == id);
    const label = goodsSite.length > 0 ? goodsSite[0].label : '';
    return label;
  }

  changePicker(key,value) {
    const {formData} = this.state
      formData[key] = value;
    this.setState({
      formData
    });
  }

  async componentDidShow() {
    vcmonitor(this)
  }

  async UNSAFE_componentWillMount() {
    const query: any = Taro.getCurrentInstance().router.params;
    const supplierId = query.id;
    const data = await http.carGet(SUPPLIER_IDENTITY, {})
    if (data){
      this.setState({ identity: data.identity })
    }
    if (supplierId) {
      Taro.showLoading({title: '加载中...'});
      const res = await http.HGet(SUPPLIER_DETAIL, {
        type: 'move',
        supplierId
      });
      const formData = res.data;
      formData.Stores_information.map(item => {
        if (item.qualifications_imgs) {
          item.qualifications_imgs = JSON.parse(item.qualifications_imgs)
        }
        const start = item.business_time_start
        const end = item.business_time_end
        if (start) {
          item.business_time_start = start.split('.')[0].substr(0,5)
        }
        if (end) {
          item.business_time_end = end.split('.')[0].substr(0,5)
        }
      })
      let fileList: any = [];
      if (res.data.b_scanning && res.data.b_scanning.indexOf(',') > -1) {
        fileList = res.data.b_scanning.split(',')
      } else if (res.data.b_scanning) {
        fileList = [res.data.b_scanning]
      }
      /*if (res.data.b_scanning) {
        fileList.push({
          url: res.data.b_scanning
        });
      }*/
      this.setFormData(formData);
      const fileList1: any = [];
      const windowsValue = this.state.windowList[formData.tadpole_use_system] &&
        this.state.windowList[formData.tadpole_use_system].label;
      if (formData && formData.Stores_information && formData.Stores_information.length <= 0) {
        formData.Stores_information.push({
          photo: [],
          photos: []
        });
      } else {
        for (let i = 0; formData.Stores_information[i]; i++) {
          if (formData.Stores_information[i].photo) {
            fileList1[i] = [];
            fileList1[i].push({
              url: formData.Stores_information[i].photo
            });
          }
        }
      }
      this.setState({
        doBusinessValue: this.state.doBusiness[formData.tadpole_open_type] &&
          this.state.doBusiness[formData.tadpole_open_type].label,
        fileList,
        fileList1,
        fileLists: fileList,
        windowsValue,
        isEdit: true
      });
      Taro.hideLoading();
    }
  }

  onFileChange(fileList?, o?, i?: any) {
    if (!i && i != 0) {
      this.uploadFile(fileList);
    } else {
      this.setState({
        fileLists: fileList
      })
    }
    if (fileList) {
      this.setState({
        fileList
      });
    }
  }

  // 商家
  changeInput({detail}, key) {
    const {formData} = this.state;
    formData[key] = detail.value;
    this.setFormData(formData);
  }

  // switch
  changeSwitch(key, value) {
    const {formData} = this.state;
    formData[key] = value == true ? 1 : 0;
    this.setFormData(formData);
  }

  setBusinessHours(index,field, value){
    const {formData} = this.state;
    const {Stores_information} = formData;
    Stores_information[index][field] = value
    formData.Stores_information = Stores_information
    this.setFormData(formData);
  }

  // 门店
  changeStore(key, index, {detail}) {
    const {formData} = this.state;
    const {Stores_information} = formData;
    Stores_information[index][key] = detail.value;
    formData.Stores_information = Stores_information;
    this.setFormData(formData);
  }

  setFormData(formData: any) {
    this.setState({
      formData
    });
  }

  // 保存
  async save(status) {
    const {formData, fileLists, longitude_and_latitude} = this.state;
    let Stores_information = formData.Stores_information;
    // const isIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  // 身份证
    // const isMepty = (value) => value.replace(/\s/g, '') == '';  // 不能为空
    // const isPhone = /^\d{11}$/; // 手机号
    // 正则 纯数字
    const patrn = /^[0-9]*$/;
    const username = formData.username = formData.username.trim();
    this.setFormData(formData);
    if (patrn.test(username) && username != '') {
      return Taro.showToast({
        title: '账号不能为纯数字',
        icon: 'none'
      });
    }
    Taro.showLoading({title: '加载中...'});
    for (let i = 0; Stores_information[i]; i++) {
      if (Stores_information[i].photos && Stores_information[i].photos.length > 0) {
        Stores_information[i].photo = Stores_information[i].photos.join(',');
      }
      if (Stores_information[i].photos && Stores_information[i].photos.length <= 0) {
        Stores_information[i].photo = '';
      }
    }
    if (formData.is_many_group == 0) {
      Stores_information = [];
    }
    if (fileLists && fileLists.length > 0) {
      const url = fileLists.join(',');
      formData.b_scanning = url;
    }
    if (fileLists && fileLists.length <= 0) {
      formData.b_scanning = '';
    }
    formData.status = status;
    const list = [];
    const params = {
      ...formData,
      Stores_information: Stores_information && JSON.stringify(Stores_information) || []
    }
    if (this.state.identity === '1'){
      delete params.Stores_information
      delete formData.Stores_information
    }
    const res = await http.postCar(SUPPLIER_SAVEANDUPDATE, params);
    if (res) {
      setTimeout(() => {
        Taro.hideLoading();
        Taro.navigateBack({
          delta: 1
        });
      }, 300);
    }
  }

  // 获取经纬度
  getLongitude(key, index?) {
    const that = this;
    Taro.chooseLocation({
      success: function (res) {
        if (res.errMsg.indexOf('ok') > -1) {
          const {formData} = that.state;
          if (index != undefined) {
            formData.Stores_information[index][key] = res;
            formData.Stores_information[index].longitude_and_latitude = `${res.longitude},${res.latitude}`
            formData.Stores_information[index].address = res.name;
            that.setFormData(formData);
          } else {
            formData.longitude_and_latitude = `${res.longitude},${res.latitude}`
            that.setState({
              [key]: res,
              formData
            })
          }
        }
      },
      fail: function () {
      }
    })
  }

  addStore() {
    const {formData, fileList1} = this.state;
    fileList1.push([]);
    formData.Stores_information.push({
      name: "",
      phone: "",
      longitude_and_latitude: "",
      address: "",
      photo: [],
      photos: []
    });
    this.setFormData(formData);
    this.setState({
      fileList1
    });
  }

  uploadFile(files, index?) {
    const api = BASE_URL + UPLODE_FALE
    const that = this
    if (TARO_ENV === 'h5') {
      if (process.env.P_ENV === 'lx') {
        lxH5Wx.chooseImage(async (f, length) => {
          lxH5Wx.uploadFile(f, length, (data) => {
            let {fileLists, fileList} = this.state;
            fileList.push(data);
            fileLists = fileList;
            this.setState({
              fileList,
              fileLists
            });
          })
        }, 1)
      } else {
        h5Wx.chooseImage(1, async ret => {
          Taro.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true
          })
          h5Wx.wxuploadImage(ret, async res => {
            const dataRet = await newHttp.catchGet(materialMedia + res, {})
            let {fileLists, fileList} = this.state;
            fileList.push(dataRet);
            fileLists = fileList;
            this.setState({
              fileList,
              fileLists
            });
            Taro.hideToast();
          })
        })
      }
    } else {
      const header = http.getHeader();
      const user = Taro.getStorageSync("user");
      header.token = user.token;
      const file: any = [];
      // 获取新文件
      const newFile: any = [];
      const oldFile: any = [];
      for (let i = 0; files[i]; i++) {
        if (files[i].url.indexOf('//tmp') == -1) {
          oldFile.push(files[i])
        } else {
          newFile.push(files[i])
        }
      }
      let uploadImgCount = 0;
      for (let i = 0; newFile[i]; i++) {
        setTimeout(() => {
          Taro.showLoading({title: '加载中...'});
          Taro.uploadFile({
            url: api,
            filePath: newFile[i].url,
            name: 'file',
            formData: {
              'imgIndex': i
            },
            header,
            success: function (res: any) {
              uploadImgCount++;
              if (res.statusCode != 200) {
                Taro.showToast({
                  title: res.data,
                  icon: 'none'
                })
                return
              }
              const data: any = JSON.parse(res.data);
              const imageUrl: string = data.imageUrl;
              file.push({
                url: imageUrl
              });
              if (uploadImgCount == newFile.length) {
                let fileLists = oldFile;
                fileLists = fileLists.concat(file);
                that.setState({
                  fileLists
                });
              }
              Taro.hideLoading();
            },
            fail: function (res) {
              Taro.hideLoading();
              Taro.showModal({
                title: '错误提示',
                content: '上传图片失败',
                showCancel: false
              })
            }
          });
        })
      }
    }
  }

  onPhotoChange(file, index?: any, i?: any) {
    const {formData, fileList1} = this.state;
    if (file) {
      fileList1[index] = file;
    }

    if (!i && i != 0) {
      this.setFormData(formData);
      this.onUploadPhotoChange(file, index);
    } else {
      formData.Stores_information[index].photos = formData.Stores_information[index].photos || [];
      formData.Stores_information[index].photos = formData.Stores_information[index].photos.splice(i, 1);
    }
    this.setState({
      fileList1,
      formData
    });
  }

  onUploadPhotoChange(files, index?) {
    const api = BASE_URL + UPLODE_FALE
    const that = this
    if (TARO_ENV === 'h5') {
      if (process.env.P_ENV === 'lx') {
        lxH5Wx.chooseImage(async (f, length) => {
          lxH5Wx.uploadFile(f, length, (data) => {
            const {formData, fileList1} = that.state;
            formData.Stores_information[index].photos = [data];
            fileList1[index] = [];
            fileList1[index].push({
              url: data
            });
            that.setState({
              formData,
              fileList1
            });
          })
        }, 1)
      } else {
        h5Wx.chooseImage(1, async ret => {
          Taro.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true
          })
          h5Wx.wxuploadImage(ret, async res => {
            const dataRet = await newHttp.catchGet(materialMedia + res, {});
            const {formData, fileList1} = that.state;
            formData.Stores_information[index].photos = [dataRet];
            fileList1[index] = [];
            fileList1[index].push({
              url: dataRet
            });
            that.setState({
              formData,
              fileList1
            });
            Taro.hideToast();
          })
        })
      }
    } else {
      const file: any = [];
      for (let i = 0; files[i]; i++) {
        Taro.showLoading({title: '加载中...'} );
        Taro.uploadFile({
          url: api,
          filePath: files[i].url,
          name: 'file',
          formData: {
            'imgIndex': i
          },
          success: function (res: any) {
            if (res.statusCode != 200) {
              Taro.showToast({
                title: res.data,
                icon: 'none'
              })
              return
            }
            const data: any = JSON.parse(res.data);
            const imageUrl: string = data.imageUrl;
            file.push(imageUrl);
              const {formData} = that.state;
              formData.Stores_information[index].photos = file;
              that.setState({
                formData
              });
            Taro.hideLoading();
          },
          fail: function (res) {
            Taro.hideLoading();
            Taro.showModal({
              title: '错误提示',
              content: '上传图片失败',
              showCancel: false
            })
          }
        });
      }
    }
  }

  onRemoveQualification(index, i){
    const { formData } = this.state
    formData['Stores_information'][index].qualifications_imgs.splice(i, 1)
    this.setState({
      formData
    })
  }
  uploadQualification(index) {
    const that = this
    const { formData } = this.state
    const api = BASE_URL + UPLODE_FALE
    if (process.env.TARO_ENV === 'h5') {
      if (process.env.P_ENV === 'lx') {
        lxH5Wx.chooseImage(async (f, length) => {
          lxH5Wx.uploadFile(f, length, (data) => {
            if (!formData['Stores_information'][index].qualifications_imgs) {
              formData['Stores_information'][index].qualifications_imgs = []
              that.setState({formData})
            }
            if (data) {
              formData['Stores_information'][index].qualifications_imgs.push({url: data})
              that.setState({formData})
            }
          })
        }, 1)
      } else {
        h5Wx.chooseImage(1, async ret => {
          Taro.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true
          })
          h5Wx.wxuploadImage(ret, async res => {
            const dataRet = await newHttp.catchGet(materialMedia + res, {media_id: res})
            if (!formData['Stores_information'][index].qualifications_imgs) {
              formData['Stores_information'][index].qualifications_imgs = []
              that.setState({formData})
            }
            if (dataRet) {
              formData['Stores_information'][index].qualifications_imgs.push({url: dataRet})
              that.setState({formData})
            }
          })
        })
      }
    } else {
      Taro.chooseImage({
        count: 1,  //最多可以选择的图片总数
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
          //启动上传等待中...
          Taro.showToast({
            title: '正在上传...',
            icon: 'loading',
            mask: true
          })
          let uploadImgCount = 0;
          for (let i = 0, h = tempFilePaths.length; i < h; i++) {
            Taro.uploadFile({
              url: api,
              filePath: tempFilePaths[i],
              name: 'file',
              formData: {
                'imgIndex': i
              },
              header: http.getHeader(),
              success: function (result) {
                uploadImgCount++;
                const data = JSON.parse(result.data);
                if (!formData['Stores_information'][index].qualifications_imgs) {
                  formData['Stores_information'][index].qualifications_imgs = []
                  that.setState({formData})
                }
                formData['Stores_information'][index].qualifications_imgs.push({url: data.imageUrl})
                if (result.statusCode == 400) {
                  Taro.showToast({
                    title: data.message,
                    icon: 'none'
                  })
                  return
                }
                //如果是最后一张,则隐藏等待中
                if (uploadImgCount == tempFilePaths.length) {
                  that.setState({formData})
                  Taro.hideToast();
                }
              },
              fail: function (result) {
                Taro.hideToast();
              }
            });
          }
        }
      })
    }
  }

  // 开票金额
  changeMoney(value) {
    const {formData} = this.state;
    formData.ticket_money = value;
    this.setFormData(formData);
  }

  changeStart(date) {
    const {formData} = this.state;
    formData.open_time_start = date;
  }

  changeEnd(date) {
    const {formData} = this.state;
    formData.open_time_end = date;
  }

  onChange({detail}) {
    const {doBusiness, formData} = this.state;
    const value = detail.value;
    const val = doBusiness[value].value;
    const doBusinessValue = doBusiness[value].label;
    formData.tadpole_open_type = val
    this.setState({
      formData,
      doBusinessValue
    });
  }

  del(index) {
    const {formData, fileList1} = this.state;
    const {Stores_information} = formData;
    Stores_information.splice(index, 1);
    formData.Stores_information = Stores_information;
    fileList1.splice(index, 1);
    this.setFormData(formData);
    this.setState({
      fileList1
    });
  }
  setSettlementPeriod(field, val){
    const {formData} = this.state;
    formData[field] = val
    this.setState({formData});
  }

  previewImage(url) {
    Taro.previewImage({
      urls: [url]
    })
  }
  render() {
    const {
      identity,
      settlementPeriodData,
      toView,
      fileList,
      fileList2,
      fileList1,
      formData,
      isEdit,
      taxesList
    } = this.state;
    const {Stores_information} = formData;
    return (
      <ScrollView scroll-into-view={toView} scroll-y='true' scroll-with-animation style='height: 100%;'>
        <View className={`business-form business ${process.env.TARO_ENV === 'h5' ? 'bh5' : ''}`}>
          <GzhAuth />
          <View className='business-form-block m-t-20'>
            <View className='business-form-block-item d-flex border-bottom'>
              <View className='business-form-block-item-left require'>
                商家名称
              </View>
              <View className='business-form-block-item-right'>
                <Input
                  placeholder='请输入商家名称'
                  onInput={(e) => this.changeInput(e, 'company')}
                  value={formData.company}
                />
              </View>
            </View>
            <View className='business-form-block-item d-flex border-bottom'>
              <View className='business-form-block-item-left require'>
                商家联系人
              </View>
              <View className='business-form-block-item-right'>
                <Input
                  placeholder='请输入联系人'
                  onInput={(e) => this.changeInput(e, 'linkman')}
                  value={formData.linkman}
                />
              </View>
            </View>
            <View className='business-form-block-item d-flex border-bottom'>
              <View className='business-form-block-item-left require'>
                商家账号
              </View>
              <View className='business-form-block-item-right'>
                <Input
                  placeholder='请输入账号，注意账号不可更改'
                  onInput={(e) => this.changeInput(e, 'username')}
                  value={formData.username}
                  disabled={isEdit}
                />
              </View>
            </View>
            <Picker
              mode='selector'
              range={taxesList}
              rangeKey='label'
              onChange={({detail: {value}}) => this.changePicker('taxpayer_type', taxesList[value].value)}
              value={formData.taxpayer_type}
            >
              <View className='business-form-block-item d-flex border-bottom'>
                <View className='business-form-block-item-left require'>
                  纳税类型
                </View>
                <View className='business-form-block-item-right '>
                  {!formData.taxpayer_type && <View className='mepty' style='color: #777777;'>
                    请选择
                    <Text className='ret'>{`>`}</Text>
                  </View>}
                  {formData.taxpayer_type && <View className='value c-666'>
                    {this.getTaxesName(formData.taxpayer_type)}
                  </View>}
                </View>
              </View>
            </Picker>
            <View className='business-form-block-item d-flex border-bottom'>
              <View className='business-form-block-item-left require'>
                联系人电话
              </View>
              <View className='business-form-block-item-right'>
                <Input
                  placeholder='请输入联系人电话'
                  onInput={(e) => this.changeInput(e, 'mobile')}
                  value={formData.mobile}
                />
              </View>
            </View>
            <View className='business-form-block-item d-flex border-bottom auto'>
              <View className='business-form-block-item-left require'>
                结算周期
              </View>
              <View className='business-form-block-item-right right-wrap'>
                <RadioGrounp
                  onChange={({value}) => this.setSettlementPeriod('settlement_period', value)}
                  data={settlementPeriodData}
                  wNo
                  scrollWrap
                  isCheck={formData.settlement_period}
                  size='13px'
                />
              </View>
            </View>
            <View className='business-form-block-item d-flex m-t-20 border-bottom auto'>
              <View className={`business-form-block-item-left ${identity !== '1' && 'require'}`}>
                营业执照
              </View>
              <View className='business-form-block-item-right'>
                {
                  process.env.TARO_ENV === 'weapp' &&
                  <AtImagePicker
                    files={fileList}
                    onChange={this.onFileChange.bind(this)}
                    multiple
                  />
                }
                {
                  process.env.TARO_ENV === 'h5' &&
                  <View className='business-form-block-item-right'>
                    {
                      fileList && fileList.map((item, imageIndex) =>
                      <View className='file_image-border'>
                        <View className='_close' onClick={(e) => {
                          const list = JSON.parse(JSON.stringify(fileList));
                          list.splice(imageIndex, 1);
                          this.onFileChange(list, {}, imageIndex);
                          e.stopPropagation();
                        }}
                        >
                          <Text className='_font'>
                            x
                          </Text>
                        </View>
                        <Image src={item} className='_image' onClick={() => this.previewImage(item)}></Image>
                      </View>
                      )
                    }
                    <View className='image-border file' onClick={() => this.onFileChange()}>
                      <View className='add'>+</View>
                    </View>
                  </View>
                }
                <View style='color: #afafaf; font-size: 10px; position: relative; left: 10px;'
                  className='m-b-20'
                >建议尺寸300*300</View>
              </View>
            </View>
          </View>
          { identity !== '1' && <View className='business-form-block m-t-20 store'>
            <View className='business-form-block-title f-m bold'>门店信息</View>
            {
              Stores_information && Stores_information.map((item, index) => {
                return (
                  <View key={index}>
                    <View className='business-form-block-title f-w-b flex-lr'>
                      <View>门店{index + 1}</View>
                      {index > 0 && <View className='d-flex-del' onClick={this.del.bind(this, index)}>
                        <AtIcon value='trash' size='18' color='#aaa' />
                      </View>}
                    </View>
                    <View className='business-form-block-item d-flex border-bottom'>
                      <View className='business-form-block-item-left require'>
                        门店名称
                      </View>
                      <View className='business-form-block-item-right'>
                        <Input
                          placeholder='请输入门店名称'
                          onInput={(e) => this.changeStore('name', index, e)}
                          value={item.name}
                        />
                      </View>
                    </View>
                    <View className='business-form-block-item d-flex border-bottom'>
                      <View className='business-form-block-item-left require c-fff'>
                        营业时间
                      </View>
                      <View className='business-form-block-item-right'>
                        <View style='display:flex;'>
                          <Picker mode='time' onChange={({detail: {value}}) => this.setBusinessHours(index, 'business_time_start', value)} value={item.business_time_start || ''}>
                            <View className='value' style={`color:${item.business_time_start ? '#000' : '#777'};`}>
                              {item.business_time_start || '起始时间'}
                            </View>
                          </Picker>
                          <View style='margin: 0 5px'>至</View>
                          <Picker mode='time' onChange={({detail: {value}}) => this.setBusinessHours(index, 'business_time_end', value)} value={item.business_time_end || ''}>
                            <View className='value' style={`color:${item.business_time_end ? '#000' : '#777'};`}>
                              {item.business_time_end || '结束时间'}
                            </View>
                          </Picker>
                        </View>
                      </View>
                    </View>
                    <View className='business-form-block-item d-flex border-bottom'>
                      <View className='business-form-block-item-left require'>
                        门店标注
                      </View>
                      <View className='business-form-block-item-right'>
                        <View
                          className='longitude'
                          onClick={() => this.getLongitude('longitude_and_latitude', index)}
                        >
                          {
                            item.longitude_and_latitude != 'undefined, undefined' &&
                            item.longitude_and_latitude ||
                            '请选择经纬度'
                          }
                        </View>
                        <AtIcon size='14' value='icon icon-a-2tubiaozhizuomoban-011' className='abs' />
                      </View>
                    </View>
                    <View className='business-form-block-item d-flex border-bottom'>
                      <View className='business-form-block-item-left require'>
                        门店地址
                      </View>
                      <View className='business-form-block-item-right'>
                        <Input
                          placeholder='请输入门店地址'
                          onInput={(e) => this.changeStore('address', index, e)}
                          value={item.address}
                        />
                      </View>
                    </View>
                    <View className='business-form-block-item d-flex border-bottom'>
                      <View className='business-form-block-item-left require'>
                        客服电话
                      </View>
                      <View className='business-form-block-item-right'>
                        <Input
                          placeholder='请输入客服电话'
                          onInput={(e) => this.changeStore('phone', index, e)}
                          value={item.phone}
                        />
                      </View>
                    </View>
                    <View className='business-form-block-item d-flex m-t-20 auto'>
                      <View className='business-form-block-item-left require c-fff'>
                        门店照片
                      </View>
                      {
                        process.env.TARO_ENV === 'weapp' &&
                        <View className='business-form-block-item-right'>
                          <AtImagePicker
                            files={fileList1[index]}
                            onChange={(file, o, i) => this.onPhotoChange(file, index, i)}
                          />
                        </View>
                      }
                      {
                        (process.env.TARO_ENV === 'h5' && fileList1[index] && fileList1[index].length <= 0) &&
                        <View className='business-form-block-item-right'>
                          <View className='image-border' onClick={() => this.onPhotoChange(null, index)}>
                            <View className='add'>+</View>
                          </View>
                        </View>
                      }
                      {
                        (process.env.TARO_ENV === 'h5' && fileList1[index] && fileList1[index].length > 0) &&
                        <View className='business-form-block-item-right'>
                          <View className='image-border'>
                            <View className='_image-border'>
                              <View className='_close' onClick={() => this.onPhotoChange([], index, 0)}>
                                <Text className='_font'>
                                  x
                                </Text>
                              </View>
                              <Image src={fileList1[index][0] && fileList1[index][0].url} className='_image' />
                            </View>
                          </View>
                        </View>
                      }
                    </View>
                    <View className='business-form-block-item d-flex m-t-20 auto'>
                      <View className='business-form-block-item-left require c-fff'>
                        资质图片
                      </View>
                      <View style='display: flex; flex-wrap: wrap;'>
                        {
                          (item.qualifications_imgs && item.qualifications_imgs.length > 0) &&
                          <View className='business-form-block-item-right' style='width: inherit !important;display: flex;flex-wrap:wrap;'>
                            {item.qualifications_imgs.map((items, i) => <View className={`image-border ${TARO_ENV + '_image-border'}`}>
                              <View className='_image-border'>
                                <View className='_close' onClick={() => this.onRemoveQualification(index, i)}>
                                  <Text className='_font'>
                                    x
                                  </Text>
                                </View>
                                <Image src={items.url} className='_image' />
                              </View>
                            </View>)}
                          </View>
                        }
                        <View className='business-form-block-item-right' style='width: inherit !important;padding-left:0 !important;margin-left:0 !important'>
                          <View className={`image-border ${TARO_ENV + 'image-border'}`} onClick={() => this.uploadQualification(index)}>
                            {TARO_ENV === 'h5' && <View className='add'>+</View>}
                            {TARO_ENV !== 'h5' && <view className='weapp-image-picker__item weapp-image-picker__choose-btn'>
                              <View className='weapp-add-bar' />
                              <View className='weapp-add-bar' />
                            </view>}
                          </View>
                        </View>
                      </View>
                    </View>
                  </View>
                )
              })
            }
          </View>}
          { identity !== '1' && <View className={process.env.TARO_ENV === 'h5' ? "_button-h5-f _button" : "_button"} onClick={() => this.addStore()}>+ 新增门店</View> }
          <View className='business-form-block m-t-20 m-b-140 finance'>
            <View className='business-form-block-title f-m bold'>财务信息</View>
            <View className='business-form-block-item d-flex border-bottom'>
              <View className='business-form-block-item-left require c-fff'>
                账户信息
              </View>
              <View className='business-form-block-item-right'>
                <Input
                  placeholder='请输入账户信息'
                  onInput={(e) => this.changeInput(e, 'finance_message')}
                  value={formData.finance_message}
                />
              </View>
            </View>
            <View className='business-form-block-item d-flex border-bottom'>
              <View className='business-form-block-item-left require c-fff'>
                账户名称
              </View>
              <View className='business-form-block-item-right'>
                <Input
                  placeholder='请输入账户名称'
                  onInput={(e) => this.changeInput(e, 'finance_account_title')}
                  value={formData.finance_account_title}
                />
              </View>
            </View>
            <View className='business-form-block-item d-flex border-bottom'>
              <View className='business-form-block-item-left require c-fff'>
                收款账号
              </View>
              <View className='business-form-block-item-right'>
                <Input
                  placeholder='请输入收款账号'
                  onInput={(e) => this.changeInput(e, 'finance_account_number')}
                  value={formData.finance_account_number}
                />
              </View>
            </View>
            <View className='business-form-block-item d-flex border-bottom'>
              <View className='business-form-block-item-left require c-fff'>
                开户行
              </View>
              <View className='business-form-block-item-right'>
                <Input
                  placeholder='请输入开户行'
                  onInput={(e) => this.changeInput(e, 'finance_opening_bank')}
                  value={formData.finance_opening_bank}
                />
              </View>
            </View>
            {/* <View className='business-form-block-item d-flex border-bottom'>
              <View className='business-form-block-item-left require c-fff'>
                开票金额
              </View>
              <View className='business-form-block-item-right'>
                <RadioGrounp
                  onChange={({value}) => {this.changeMoney(value)}}
                  data={moneyData}
                  wNo
                  isCheck={formData.ticket_money}
                  size="13px"
                ></RadioGrounp>
              </View>
            </View> */}
          </View>
          <View className='foot-btn'>
            <View className={process.env.TARO_ENV === 'h5' ? "_button-h5-f btn" : "btn"}
              onClick={() => this.save(0)}
            >保存</View>
            <View className={process.env.TARO_ENV === 'h5' ? "_button-h5-f btn active" : "btn active"}
              onClick={() => this.save(1)}
            >保存并提交</View>
          </View>
        </View>
      </ScrollView>
    )
  }
}

export default businessForm as ComponentClass;
